<template>
    <div class="newsInfo-content">
      <h3 class="title">{{ newsInfo.title }}</h3>
      <p class="subtitle">
        <span>发表时间：{{ newsInfo.add_time | dateFormat }}</span>
        <span>点击：{{ newsInfo.click }}次</span>
      </p>
      <hr>
      <!-- 内容区域 -->
      <div class="content" v-html="newsInfo.content">
        <!-- 评论区域 -->
      </div>
     <comment :id = this.id></comment>
    </div>
</template>

<script>
// 导入评论子组件
import comment from '../subcomponents/comment.vue'
export default {
  name: 'newsInfo',
  data() {
    return {
      id: this.$route.params.id , // 将axios 获取到的数据的id值挂载到data 的id上，方便以后调用
      newsInfo: {}
    }
  },
  created(){
      this.getNewsInfo()
  },
  methods:{
    getNewsInfo(){
      this.$axios.get('http://www.escook.cn:3000/api/getnew/' + this.id)
      .then( res=> {
        console.log( res.data);
        this.newsInfo = res.data.message[0];
      })
      .catch( err => {
        console.log(err);
      })
    }
  },
  components: {  // 注册子组件
    comment
  }

}
</script>

<style lang="less" scoped>
  .newsInfo-content {
    padding: 0 4px;
    .title {
        margin: 15px 0;
        font-size: 16px;
        text-align: center;
        color: red;
    }
    .subtitle {
        font-size: 13px;
        color: #226aff;
        display: flex;
        justify-content: space-between;
    }
    .content {
      img {
        width: 100%;
      }
    }
  }
</style>
